<template>
  <div>
    <el-container :class="{ asideFixed2: asideFixed }">
      <el-aside
        width="300px"
        
        :class="{ asideFixed: asideFixed }"
      >
      <!-- :class="{ asideFixed: asideFixed }" -->
      <div id="fixedNav1" >

       <BlogAttributeCard :articleInfo="articleInfo" ><template>{{classify.sortName}}</template></BlogAttributeCard>

        <MemberExclusive></MemberExclusive>
      </div>

        
      </el-aside>

      <el-main width="800px" :class="{ asideFixed1: asideFixed }">
        <div class="article">
          <div class="artTitle">
            <h1>{{ articleInfo.title }}</h1>
          </div>

          <div class="artContent">
            <div class="markdown-body">
              <VueMarkdown
                :source="articleInfo.content"
                v-highlight
              ></VueMarkdown>
            </div>
          </div>

          <div class="success"></div>
        </div>

        <div>
          <div class="myComment">
            <el-row>
              <el-col :span="2">
                <div class="myCommentImg">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    :size="50"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="22">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6}"
                  placeholder="请输入评论"
                  v-model="myComment"
                  
                >
                </el-input>
                <div @click="write()">
                <el-link :underline="false" style="float: right" >评论</el-link>
              </div>
              </el-col>
            </el-row>
          </div>

          <div class="comments">
            
            <comments v-if="reload"> <template>{{articleInfo.countComment}}</template></comments>


           


            
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";
import MemberExclusive from "@/components/card/MemberExclusiveCard.vue";
import { findArticleById } from "@/api/article";
import Comments from "./Comment/comments.vue"
import BlogAttributeCard from './Card/blogAttributeCard.vue'
import {writeComment} from '@/api/comment'
import {getToken} from '@/request/token'
import {getUserInfo} from '@/api/user'
export default {
  created() {
    this.id = this.$route.query.id;
    findArticleById(this.id).then((res) => {
      this.articleInfo = res.data;
      this.classify=this.articleInfo.classify
     
    });
  },
  data() {
    return {
      asideFixed: false,
      timer: null,
      id: "",
      articleInfo: {},
      myComment: "",
      classify:{},
      comment:{
        userId:'',
        articleId:'',
        content:'',
        parentId:''
      },
      reload:true
    };
  },
  components: {
    VueMarkdown,
    MemberExclusive,
    Comments,
    BlogAttributeCard,
  },

  mounted() {
    window.addEventListener("scroll", this.initHeight1);
    
  },
  methods: {
    write(){
      if(this.myComment===''||this.myComment===null){
        return   this.$notify({
          title: '提示',
          message: '内容不能为空',
          type: 'warning'
        });
        
      }
      const token=getToken();
     
    if(token!=null){
    getUserInfo(token).then(res=>{
      if(!res.success){
        return this.$notify({
          title: '提示',
          message: '非法评论',
          type: 'error'
        });
      }else{
        this.comment.articleId=this.articleInfo.id
         this.comment.userId=res.data.id
         this.comment.content=this.myComment
         this.comment.parentId=0
         writeComment(this.comment).then(res=>{
          if(res.success){
            this.reload=false
            setTimeout(()=>{
              this.reload=true
            },100)
           
            this.myComment=''
            this.articleInfo.countComment+=1
            return this.$message.success('评论成功');
          }
          return this.$message.error('非法评论');
         })
      
      }
      
    })
  }else{
    return this.$notify({
          title: '提示',
          message: '您还未登录',
          type: 'error'
        });
  }
    },
    initHeight1() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        let offsetTop = document.querySelector("#fixedNav1").offsetTop;
        scrollTop > 100? (this.asideFixed = true) :(this.asideFixed = false)
        
    
      


    },
  },
  destroyed() {
    //移除监听
    window.removeEventListener("scroll", this.initHeight1);
  },
};
</script>

<style scoped>
.asideFixed {
  position: fixed;
  top: 40px;
  max-height: calc(100vh);
  overflow: auto;
}
.asideFixed1 {
  position: relative;
  left: 300px;
  
  display: block;
}
.asideFixed2 {
  width: 80%;
}

.el-container {
  height: 100%;
  padding: 0;
  margin: 0;

  position: relative;
}
.el-aside {
  background: rgb(250, 250, 250);
  margin-top: 35px;
}
.el-main {
  margin-left: 0px;
}

/* main */
.article {
  background: rgb(255, 251, 251);
  margin-bottom: 10px;
}
/* .artTitle {
} */

.artContent {
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
}
.success {
  height: 30px;
  background: rgb(255, 255, 255);
}


/* bb */
.author {
  font-size: 12px;
  font-weight: bold;

  position: relative;
}
.bb {
  width: 120px;
}
.myCommentImg {
  position: relative;
  margin-top: 10px;
}

.comments {
  background-color: #fff;
}
</style>